<template>
	<view :data-theme="theme">
		<view class="sign">
			<view class="header">
				<view class="title mb30 flex">
					连续签到
					<view @click="toInfo()">
						<text class="iconfont icon-shuoming"></text>
					</view>
				</view>
				<view class="list acea-row row-center row-bottom">
					<view class="item bg_color">{{ signCount[0] || 0 }}</view>
					<view class="item bg_color">{{ signCount[1] || 0 }}</view>
					<view class="item bg_color">{{ signCount[2] || 0 }}</view>
					<view class="item bg_color">{{ signCount[3] || 0 }}</view>
					<view class="data">天</view>
				</view>
				<view class="acea-row row-center-wrapper">
					<view class="tip acea-row row-center-wrapper">
						<image src="../static/images/jinbi.png"></image>
						<view>{{ '今日签到+' + integral + '积分，+' + experience + '经验' }}</view>
					</view>
				</view>
				<navigator hover-class="none" url="/pages/merchant/user_sgin_list/index">
					<view class="record">
						签到记录
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</navigator>
			</view>

			<signCalendar :yearMonth="targetDate" :dataSource="signData" @dateChange="getSignInfo" @clickChange="clickSign"></signCalendar>
		</view>
		<view class="signTip acea-row row-center-wrapper" :class="active == true ? 'on' : ''">
			<view class="signTipLight loadingpic"></view>
			<view class="signTipCon">
				<view class="signTipBox"></view>
				<view class="state">签到成功</view>
				<view class="integral">获得{{ integral }}积分，{{ experience }}经验</view>
				<view class="signTipBnt" @click="close">好的</view>
			</view>
		</view>
		<view class="mask" @touchmove.stop.prevent="false" :hidden="active == false"></view>
	</view>
</template>

<script>
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import signCalendar from '../components/signCalendar/index.vue';
import Cache from '@/utils/cache';
import { signInfo } from '@/api/user.js';
import { setFormId } from '@/api/api.js';
let app = getApp();
export default {
	data() {
		return {
			active: false,
			theme: app.globalData.theme,
			targetDate: parseInt(new Date().getFullYear()) + '-' + parseInt(new Date().getMonth() + 1), //本月
			sumCount: 0,
			signData: [],
			signCount: [],
			integral: 0,
			experience: 0,
			month: '',
			preMoth: ''
		};
	},
	watch: {
		month(newVal) {
			let pre = Number(this.month);
			if (pre < 10) {
				this.preMoth = '0' + pre;
			} else {
				this.preMoth = pre;
			}
			let next = Number(this.month) + 1;
			if (next > 12) {
				this.nextMoth = '0' + 1;
			} else if (next < 10) {
				this.nextMoth = '0' + next;
			} else {
				this.nextMoth = next;
			}
		}
	},
	onLoad: function (options) {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		let now = new Date();
		this.year = now.getFullYear();
		let month = now.getMonth() + 1;
		let pre = Number(month);
		if (pre < 10) {
			this.month = '0' + pre;
		} else {
			this.month = pre;
		}
		this.getSignInfo(this.year + '-' + this.month);
		//this.months = this.year + '-' + this.month;
	},
	components: {
		signCalendar
	},
	methods: {
		clickSign(day) {
			this.signData.push(day);
			this.sumCount++;
		},
		/**
		 * 关闭签到提示
		 */
		close: function () {
			this.active = false;
		},
		/**
		 * 数字分割为数组
		 * @param int num 需要分割的数字
		 * @param int length 需要分割为n位数组
		 */
		PrefixInteger: function (num, length) {
			return (Array(length).join('0') + num).slice(-length).split('');
		},
		/**
		 * 获取签到页信息
		 */
		getSignInfo: function (month) {
			signInfo({
				month: month
			})
				.then((res) => {
					uni.hideLoading();
					let data = res.data;
					this.signData = data.signDateList;
					this.signCount = this.PrefixInteger(data.signDayNum, 4);
					this.integral = data.integral;
					this.experience = data.experience;
					Cache.set('signRule', data.signRule);
					if (data.isTip) this.active = true;
				})
				.catch((err) => {
					uni.hideLoading();
				});
		},
		toInfo() {
			uni.navigateTo({
				url: `/pages/users/user_sgin_info/index`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.signTip {
	width: 644rpx;
	height: 645rpx;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -322rpx;
	margin-top: -322.5rpx;
	z-index: 99;
	text-align: center;
	transition: all 0.3s ease-in-out 0s;
	opacity: 0;
	transform: scale(0);
	.signTipLight {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.signTipCon {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 420rpx;
		height: 420rpx;
		margin-top: -700rpx;
		position: relative;
		.state {
			font-size: 34rpx;
			color: #fff;
			margin-top: 150rpx;
		}
		.integral {
			font-size: 30rpx;
			color: rgba(255, 255, 255, 0.6);
			margin-top: 9rpx;
		}
		.signTipBnt {
			font-size: 30rpx;
			@include main_color(theme);
			width: 260rpx;
			height: 76rpx;
			@include second-gradient(theme);
			border-radius: 38rpx;
			line-height: 76rpx;
			margin: 48rpx auto 0 auto;
		}
	}
}

.on {
	opacity: 1;
	transform: scale(1);
}
.signTipBox {
	@include main_bg_color(theme);
	height: 360rpx;
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: -1;
}

.sign {
	.header {
		width: 100%;
		height: 542rpx;
		background: url('')
			no-repeat;
		background-size: 100% 100%;
		@include main_bg_color(theme);
		padding-top: 60rpx;
	}

	.title {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		justify-content: center;

		.icon-shuoming {
			font-size: 30rpx;
			margin-left: 12rpx;
		}
	}

	.tip {
		margin-top: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #fff;
		background-color: #ffb22d;
		box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
		border-radius: 27rpx;
		opacity: 1;
		padding: 0 17rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 5rpx;
		}
	}
}

.icon-xiangyou {
	font-size: 22rpx;
}

.record {
	position: absolute;
	display: flex;
	align-items: center;
	top: 40rpx;
	right: 0;
	color: #ffddb8;
	font-size: 22rpx;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 8rpx 18rpx;
	border-radius: 20px 0px 0px 20px;
}

.list {
	.item {
		width: 80rpx;
		height: 116rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		@include main_color(theme);
		font-size: 72rpx;
		font-weight: bold;
		text-align: center;
		line-height: 116rpx;
		margin-right: 19rpx;
		border-radius: 8rpx;
		background-image: url('');
	}

	.data {
		font-size: 30rpx;
		color: #fff;
	}
}
</style>
